import React, { Component } from "react";

import {Modal, Menu, Row, Col,  Divider,Dropdown, Space} from "antd";
import { Link,withRouter } from "react-router-dom";
import { connect } from "react-redux";
import {
  HomeOutlined,
  CodeOutlined,
  BarChartOutlined,
  SmileOutlined,
  LogoutOutlined,
  DesktopOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons";
const { confirm } = Modal;
const url = require("../utils/conUrl");

class Index extends Component {
  state = {
    is_login: false,
    user_name: "",
  };
  componentDidMount() {
    if (sessionStorage.getItem("token")) {
      this.setState({ is_login: true });
      if (this.props.state.type === 0) {
        this.setState({ user_name: "管理员" });
      } else if (this.props.state.type === 1) {
        this.setState({ user_name: `${this.props.state.data.tch_name} 老师` });
      } else {
        this.setState({ user_name: `${this.props.state.data.stu_name} 同学` });
      }
    }
  }
  logout = () => {
    let self = this
    confirm({
      title: "你确定要退出吗?",
      icon: <ExclamationCircleOutlined />,
      okText:'确认',
      cancelText:'取消',
      onOk() {
          localStorage.clear();
          sessionStorage.clear();
          self.props.history.push("/h");
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  
  }
  render() {
    const userContent = (
      <div>
        <Menu selectedKeys={["xxx"]}>
          <Menu.Item key="1" icon={<LogoutOutlined />} onClick={this.logout}>
            退出登录
          </Menu.Item>
        </Menu>
      </div>
    );
    return (
      <div>
        <Row className="header">
          <Col span={9}>
            <div className="logo-container">
              <div className="logo-item">
                <img src={url.api + "/file/avatar/header_logo.png"} alt="" />
              </div>
              <Divider type="vertical" />
              <div className="logo-item">
                <svg
                  t="1592123638654"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="5293"
                  width="30"
                  height="30"
                >
                  <path
                    d="M705.92 915.84H320c-28.16 0-51.2-23.04-51.2-51.2V630.4c0-28.16 23.04-51.2 51.2-51.2h385.92c28.16 0 51.2 23.04 51.2 51.2v234.88c0 27.52-23.04 50.56-51.2 50.56z"
                    fill="#EEF6FF"
                    p-id="5294"
                  ></path>
                  <path
                    d="M705.92 928.64H320c-35.2 0-64-28.8-64-64V630.4c0-35.2 28.8-64 64-64h385.92c35.2 0 64 28.8 64 64v234.88c0 35.2-28.8 63.36-64 63.36zM320 592c-21.12 0-38.4 17.28-38.4 38.4v234.88c0 21.12 17.28 38.4 38.4 38.4h385.92c21.12 0 38.4-17.28 38.4-38.4V630.4c0-21.12-17.28-38.4-38.4-38.4H320z"
                    fill="#708DB7"
                    p-id="5295"
                  ></path>
                  <path
                    d="M515.2 163.2C418.56 163.2 339.2 242.56 339.2 338.56V518.4h352V338.56c0-96-79.36-175.36-176-175.36z"
                    fill="#E8E6FF"
                    p-id="5296"
                  ></path>
                  <path
                    d="M704 531.2H326.4V338.56c0-103.68 84.48-188.16 188.8-188.16S704 234.88 704 338.56V531.2z m-352-25.6h326.4V338.56c0-89.6-72.96-162.56-163.2-162.56S352 248.96 352 338.56V505.6z"
                    fill="#708DB7"
                    p-id="5297"
                  ></path>
                  <path
                    d="M456.32 518.4h112v60.8H456.32z"
                    fill="#EEF6FF"
                    p-id="5298"
                  ></path>
                  <path
                    d="M581.76 592H443.52V505.6h137.6v86.4z m-112.64-25.6h86.4V531.2H469.12v35.2z"
                    fill="#708DB7"
                    p-id="5299"
                  ></path>
                  <path
                    d="M714.88 431.36c-12.8 0-23.04-10.24-23.04-23.04v-38.4c0-12.8 10.24-23.04 23.04-23.04s23.04 10.24 23.04 23.04v38.4c0 12.8-10.24 23.04-23.04 23.04z"
                    fill="#EEF6FF"
                    p-id="5300"
                  ></path>
                  <path
                    d="M714.88 444.16c-19.84 0-35.84-16-35.84-35.84v-38.4c0-19.84 16-35.84 35.84-35.84s35.84 16 35.84 35.84v38.4c0 19.84-16 35.84-35.84 35.84z m0-83.84c-5.76 0-10.24 4.48-10.24 10.24v38.4c0 5.76 4.48 10.24 10.24 10.24s10.24-4.48 10.24-10.24v-38.4c0-5.76-4.48-10.24-10.24-10.24z"
                    fill="#708DB7"
                    p-id="5301"
                  ></path>
                  <path
                    d="M312.32 421.12c-12.8 0-23.04-10.24-23.04-23.04v-38.4c0-12.8 10.24-23.04 23.04-23.04s23.04 10.24 23.04 23.04v38.4c0 12.8-10.88 23.04-23.04 23.04z"
                    fill="#EEF6FF"
                    p-id="5302"
                  ></path>
                  <path
                    d="M312.32 433.92c-19.84 0-35.84-16-35.84-35.84v-38.4c0-19.84 16-35.84 35.84-35.84s35.84 16 35.84 35.84v38.4c0 19.84-16.64 35.84-35.84 35.84z m0-83.84c-5.76 0-10.24 4.48-10.24 10.24v38.4c0 5.76 4.48 10.24 10.24 10.24s10.24-4.48 10.24-10.24v-38.4c0-5.76-5.12-10.24-10.24-10.24z"
                    fill="#708DB7"
                    p-id="5303"
                  ></path>
                  <path
                    d="M795.52 763.52h-25.6c-7.04 0-12.8-5.76-12.8-12.8v-46.08c0-14.08-2.56-25.6 11.52-25.6h26.88c14.08 0 25.6 11.52 25.6 25.6v33.28c0 14.08-11.52 25.6-25.6 25.6z"
                    fill="#EEF6FF"
                    p-id="5304"
                  ></path>
                  <path
                    d="M795.52 776.32h-25.6c-14.08 0-25.6-11.52-25.6-25.6v-46.08-5.12c0-8.96-0.64-19.2 6.4-26.24 4.48-4.48 10.24-6.4 17.92-6.4h26.88c21.12 0 38.4 17.28 38.4 38.4v33.28c0 20.48-17.28 37.76-38.4 37.76z m-26.24-84.48v58.88h25.6c7.04 0 12.8-5.76 12.8-12.8v-33.28c0-7.04-5.76-12.8-12.8-12.8h-25.6z"
                    fill="#708DB7"
                    p-id="5305"
                  ></path>
                  <path
                    d="M816.64 734.08l-0.64-25.6v12.8-12.8c5.12 0 48-3.2 48-58.24V454.4h25.6v196.48c0 81.28-72.32 83.2-72.96 83.2z"
                    fill="#708DB7"
                    p-id="5306"
                  ></path>
                  <path
                    d="M228.48 763.52h25.6c7.04 0 12.8-5.76 12.8-12.8v-58.88c0-7.04-5.76-12.8-12.8-12.8h-25.6c-14.08 0-25.6 11.52-25.6 25.6v33.28c0 14.08 11.52 25.6 25.6 25.6z"
                    fill="#EEF6FF"
                    p-id="5307"
                  ></path>
                  <path
                    d="M254.08 776.32h-25.6c-21.12 0-38.4-17.28-38.4-38.4v-33.28c0-21.12 17.28-38.4 38.4-38.4h25.6c14.08 0 25.6 11.52 25.6 25.6v58.88c0 14.08-11.52 25.6-25.6 25.6z m-25.6-84.48c-7.04 0-12.8 5.76-12.8 12.8v33.28c0 7.04 5.76 12.8 12.8 12.8h25.6v-58.88h-25.6zM519.04 140.16c-23.68 0-43.52-19.2-43.52-43.52s19.2-43.52 43.52-43.52 43.52 19.2 43.52 43.52-19.84 43.52-43.52 43.52z m0-61.44c-9.6 0-17.92 8.32-17.92 17.92s8.32 17.92 17.92 17.92 17.92-8.32 17.92-17.92-8.32-17.92-17.92-17.92z"
                    fill="#708DB7"
                    p-id="5308"
                  ></path>
                  <path
                    d="M505.6 134.4h25.6v32h-25.6z"
                    fill="#708DB7"
                    p-id="5309"
                  ></path>
                  <path
                    d="M512.64 305.92m-69.12 0a69.12 69.12 0 1 0 138.24 0 69.12 69.12 0 1 0-138.24 0Z"
                    fill="#FFF27D"
                    p-id="5310"
                  ></path>
                  <path
                    d="M512.64 387.84c-44.8 0-81.92-36.48-81.92-81.92S467.2 224 512.64 224s81.92 36.48 81.92 81.92-37.12 81.92-81.92 81.92z m0-138.24c-30.72 0-56.32 24.96-56.32 56.32s24.96 56.32 56.32 56.32 56.32-24.96 56.32-56.32-25.6-56.32-56.32-56.32z"
                    fill="#708DB7"
                    p-id="5311"
                  ></path>
                  <path
                    d="M604.16 433.28m-10.24 0a10.24 10.24 0 1 0 20.48 0 10.24 10.24 0 1 0-20.48 0Z"
                    fill="#708DB7"
                    p-id="5312"
                  ></path>
                  <path
                    d="M422.4 659.2H339.2c-7.04 0-12.8-5.76-12.8-12.8s5.76-12.8 12.8-12.8h83.2c7.04 0 12.8 5.76 12.8 12.8s-5.76 12.8-12.8 12.8z"
                    fill="#708DB7"
                    p-id="5313"
                  ></path>
                  <path
                    d="M512.64 305.92m-16 0a16 16 0 1 0 32 0 16 16 0 1 0-32 0Z"
                    fill="#708DB7"
                    p-id="5314"
                  ></path>
                  <path
                    d="M876.8 473.6c-27.52 0-51.2-21.76-51.2-46.72 0-7.04 5.76-12.8 12.8-12.8s12.8 5.76 12.8 12.8c0 10.88 12.16 21.12 25.6 21.12s25.6-10.24 25.6-21.12c0-7.04 5.76-12.8 12.8-12.8s12.8 5.76 12.8 12.8c0 24.96-23.68 46.72-51.2 46.72z"
                    fill="#708DB7"
                    p-id="5315"
                  ></path>
                  <path
                    d="M194.56 734.08c-0.64 0-72.96-2.56-72.96-83.84V454.4h25.6v196.48c0 55.04 42.88 57.6 48 58.24l-0.64 24.96z"
                    fill="#708DB7"
                    p-id="5316"
                  ></path>
                  <path
                    d="M131.2 473.6c-27.52 0-51.2-21.76-51.2-46.72 0-7.04 5.76-12.8 12.8-12.8s12.8 5.76 12.8 12.8c0 10.88 12.16 21.12 25.6 21.12s25.6-10.24 25.6-21.12c0-7.04 5.76-12.8 12.8-12.8s12.8 5.76 12.8 12.8c0 24.96-23.04 46.72-51.2 46.72z"
                    fill="#708DB7"
                    p-id="5317"
                  ></path>
                  <path
                    d="M583.04 837.12m-23.68 0a23.68 23.68 0 1 0 47.36 0 23.68 23.68 0 1 0-47.36 0Z"
                    fill="#FFF27D"
                    p-id="5318"
                  ></path>
                  <path
                    d="M583.04 873.6c-19.84 0-36.48-16-36.48-36.48s16-36.48 36.48-36.48 36.48 16 36.48 36.48-16.64 36.48-36.48 36.48z m0-46.72c-5.76 0-10.88 4.48-10.88 10.88s4.48 10.88 10.88 10.88 10.88-4.48 10.88-10.88-5.12-10.88-10.88-10.88z"
                    fill="#708DB7"
                    p-id="5319"
                  ></path>
                  <path
                    d="M672.64 837.12m-23.68 0a23.68 23.68 0 1 0 47.36 0 23.68 23.68 0 1 0-47.36 0Z"
                    fill="#FF9797"
                    p-id="5320"
                  ></path>
                  <path
                    d="M672.64 873.6c-19.84 0-36.48-16-36.48-36.48s16-36.48 36.48-36.48 36.48 16 36.48 36.48-16.64 36.48-36.48 36.48z m0-46.72c-5.76 0-10.88 4.48-10.88 10.88s4.48 10.88 10.88 10.88 10.88-4.48 10.88-10.88-5.12-10.88-10.88-10.88z"
                    fill="#708DB7"
                    p-id="5321"
                  ></path>
                </svg>
                <span className="header-logo-text">
                  人工智能虚拟仿真实验平台
                </span>
              </div>
            </div>
          </Col>
          <Col span={2}></Col>
          <Col className="memu-div" span={12}>
            <Menu mode="horizontal" theme="dark">
              <Menu.Item key="h" icon={<HomeOutlined />}>
                <Link to="/h">首页</Link>
              </Menu.Item>
              <Menu.Item key="s" icon={<DesktopOutlined />}>
                <Link to="/s">学习教程</Link>
              </Menu.Item>
              <Menu.Item key="c" icon={<CodeOutlined />}>
                <Link to="/c"> 在线编程</Link>
              </Menu.Item>
              <Menu.Item key="admin" icon={<BarChartOutlined />}>
                <Link to="/admin">实验管理</Link>
              </Menu.Item>
              <Divider type="vertical" />
              {this.state.is_login ? (
                <Dropdown overlay={userContent}>
                  <Space>
                    <SmileOutlined /> {this.state.user_name}
                  </Space>
                </Dropdown>
              ) : (
                <Menu.Item key="login">
                  <Link to="/login"> 登录</Link>
                </Menu.Item>
              )}
            </Menu>
          </Col>
        </Row>
      </div>
    );
  }
}
const mapStateToProps = (state) => {
  return {
    state: state.user,
  };
};
const actionCreator = {};
export default connect(mapStateToProps, actionCreator)(withRouter(Index));
